<template>
    <el-form-item label="规格选项" v-loading="bodyLoading">
        <el-card shadow="never" class="w-full mb-3" v-for="(item, index) in sku_card_list" :key="item.id"
            v-loading="item.loading">
            <template #header>
                <div class="flex items-center">
                    <el-input v-model="item.text" placeholder="规格名称" style="width:200px;" @change="handleUpdate(item)">
                        <template #append>
                            <el-icon class="cursor-pointer" @click="handleChooseSku(item)">
                                <more />
                            </el-icon>
                        </template>
                    </el-input>
                    <el-button class="ml-auto" size="small" @click="sortCard('up', index)"
                        :disabled="index == 0"><el-icon>
                            <Top />
                        </el-icon></el-button>

                    <el-button size="small" @click="sortCard('down', index)"
                        :disabled="index === (sku_card_list.length - 1)"><el-icon>
                            <Bottom />
                        </el-icon></el-button>

                    <el-popconfirm title="是否要删除该选项？" confirmButtonText="确认" cancelButtonText="取消"
                        @confirm="handleDelete(item)">
                        <template #reference>
                            <el-button size="small"><el-icon>
                                    <Delete />
                                </el-icon></el-button>
                        </template>
                    </el-popconfirm>

                </div>
            </template>
            <SkuCardItem :skuCardId="item.id" />
        </el-card>
        <el-button type="success" size="small" :loading="btnLoading" @click="addSkuCardEvent">添加规格选项</el-button>

    </el-form-item>

    <ChooseSku ref="ChooseSkuRef" />

</template>

<script setup>
    import { ref } from "vue"
    import SkuCardItem from './SkuCardItem.vue';
    import ChooseSku from "~/components/ChooseSku.vue"
    import {
        sku_card_list,
        addSkuCardEvent,
        btnLoading,
        handleUpdate,
        handleDelete,
        sortCard,
        bodyLoading,
        handleChooseSetGoodsSkusCard
    } from "~/composables/useSku.js"

    const ChooseSkuRef = ref(null)
    const handleChooseSku = (item) => {
        ChooseSkuRef.value.open((value) => {
            handleChooseSetGoodsSkusCard(item.id, {
                name: value.name,
                value: value.list
            })
        })
    }

</script>

<style>
    .el-card__header {
        @apply !p-2 bg-gray-50;
    }
</style>